<template>
  <div>
    <my-header></my-header>
    <div class="travel">
      <div class="page">
        <div class="img1">
          <img src="/ntitle4.png" />
          <p>您关心的游览信息一目了然</p>
        </div>
        <div class="img2">
          <img src="/youBanner1.jpg" />
        </div>
      </div>
      <div class="page2">
        <div class="img1">
          <img src="../assets/loginimg/bor1.png" alt="" />
        </div>
        <div class="zhinan">
          <div class="zhinan_1">
            <img src="../assets/loginimg/home.png" alt="" />
            &nbsp;
            <span>游园指南</span>
          </div>
          <div class="zhinan_2">
            <img src="../assets/loginimg/home2.png" alt="" />
            <span>游园指南</span>
          </div>
          <div>
            <ul class="luxian">
              <li>园区时间</li>
              <li>交通指南</li>
              <li>常见问题</li>
              <li>地图下载</li>
              <li>游玩路线</li>
            </ul>
          </div>
        </div>
        <div class="daohang">
          <div class="daohang_1">
            <span>服务设施</span>
          </div>
          <div class="daohang_2">
            <span>温馨提示</span>
          </div>
          <div class="daohang_3">
            <span>注意事项</span>
          </div>
        </div>

        <div class="fuwu">
          <div class="biaoqian">
            <img src="/zhua.png" alt="" />
            <h3>服务设施</h3>
          </div>
          <div class="neirong">
            <div
              class="neirong_1"
              v-for="{uid, img, title, neirong} in fuwu"
              :key="uid"
            >
              <div>
                <img :src="`http://localhost:8080/${img}`" alt="" />
              </div>

              <div class="xiaoxi">
                <h4>{{ title }}</h4>
                <p>{{ neirong }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="tishi">
          <!-- <img src="/ban.jpg" alt="" /> -->
          <div class="biaoqian">
            <img src="/zhua.png" alt="" />
            <h3>温馨提示</h3>
          </div>
          <div class="neirong">
            <div class="neirong_1" v-for="x in data" :key="x.eid">
              <img :src="`http://localhost:8080/${x.tupian}`" alt="" />
              <div>
                <p>{{ x.title }}</p>
                <span>{{ x.content }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="zhuyi">
          <!-- <img src="/wen1.jpg" alt="" /> -->
          <div class="biaoqian">
            <img src="/zhua.png" alt="" />
            <h3>注意事项</h3>
          </div>
          <div class="neirong">
            <div class="neirong_1" v-for="y in not" :key="y.lid">
              <img :src="`http://localhost:8080/${y.image_file}`" />
              <div>
                <p>{{ y.title_form }}</p>
                <span>{{ y.content_1ie }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import MyHeader from "@/components/MyHeader.vue";
  import MyFooter from "@/components/MyFooter.vue";
  export default {
    components: {MyHeader, MyFooter},
    mounted() {
      this.getData();
      this.getshuju();
      this.getfuwu();
    },
    data() {
      return {
        data: null,
        not: null,
        fuwu: null,
      };
    },
    methods: {
      getData() {
        const url = "travel";
        this.axios.get(url).then(res => {
          console.log(res);
          this.data = res.data.result;
        });
      },
      getshuju() {
        const url = "notice";
        this.axios.get(url).then(res => {
          console.log(res);
          this.not = res.data.result;
        });
      },
      getfuwu() {
        const url = "service";
        this.axios.get(url).then(res => {
          console.log(res);
          this.fuwu = res.data.result;
        });
      },
    },
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  .travel {
    width: 100vw;
  }

  .page .img1 {
    width: 521px;
    height: 121px;
    position: absolute;
    top: 15%;
    left: 13%;
  }

  .page .img1 img {
    width: 100%;
  }

  .page .img1 p {
    color: white;
    font-size: 33px;
  }

  .page .img2 img {
    width: 100%;
  }

  .page2 {
    margin-top: -4vh;
    background-image: url("/public/wen1.jpg");
    background-size: cover;
  }

  .page2 img {
    width: 100%;
  }

  .page2 .zhinan {
    margin-top: -7%;
    margin-left: 10%;
  }

  .page2 .zhinan_1 {
    display: inline-block;
    margin-right: 15px;
  }

  .page2 .zhinan_2 {
    display: inline-block;
  }

  .page2 .zhinan .zhinan_1 img {
    width: 15px;
    height: 15px;
  }

  .page2 .zhinan .zhinan_2 img {
    position: relative;
    top: 10px;
    width: 31px;
    height: 31px;
  }
  .page2 .zhinan .zhinan_2 img:active.luxian {
    display: block;
  }
  .page2 .zhinan .luxian {
    margin-top: 10px;
    margin-left: 8%;
    list-style: none;
    display: none;
  }
  .page2 .zhinan .luxian li {
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    color: #33a6dc;
    border: 1px solid #cccccc;
    background-color: white;
  }

  .daohang {
    display: flex;
    text-align: center;
    position: relative;
    margin-top: 20px;
    justify-content: center;
  }

  .daohang .daohang_1,
  .daohang_2,
  .daohang_3 {
    user-select: none;
    cursor: pointer;
    width: 450px;
    height: 50px;
    background-image: url("/public/buyBg.jpg");
    color: white;
    line-height: 50px;
    margin-right: 3px;
  }

  .daohang .daohang_1:active {
    background-image: url("/public/re.jpg");
  }

  .daohang .daohang_2:active {
    background-image: url("/public/re.jpg");
  }

  .daohang .daohang_3:active {
    background-image: url("/public/re.jpg");
  }
  .fuwu {
    height: 600px;
  }

  .fuwu .biaoqian {
    display: flex;
    margin-left: 43%;
    margin-top: 20px;
  }

  .fuwu .biaoqian img {
    margin-right: 15px;
    display: inline-block;
    width: 61px;
    height: 66px;
  }

  .fuwu .biaoqian h3 {
    font-size: 42px;
    color: #2b4c1d;
  }
  .fuwu .neirong {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5%;
    position: relative;
  }
  .fuwu .neirong .neirong_1 {
    display: flex;
    width: 625px;
    height: 132px;
    margin-left: 20px;
    margin-top: 30px;
  }
  .fuwu .neirong .neirong_1 .xiaoxi {
    margin-left: 10px;
  }
  .fuwu .neirong .neirong_1 img {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 5%;
  }
  .fuwu .neirong .neirong_1 h4 {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .tishi {
    height: 600px;
    background-image: url("/public/ban.jpg");
  }
  .tishi .biaoqian {
    display: flex;
    margin-left: 43%;
  }

  .tishi .biaoqian img {
    margin-right: 15px;
    display: inline-block;
    width: 61px;
    height: 66px;
  }

  .tishi .biaoqian h3 {
    font-size: 42px;
    color: #2b4c1d;
  }
  .tishi .neirong {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
  .tishi .neirong .neirong_1 {
    background-color: white;
    border-radius: 15px;
    margin-left: 10px;
    width: 330px;
    height: 400px;
  }
  .tishi .neirong .neirong_1 p {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 24px;
  }
  .tishi .neirong .neirong_1 span {
    margin-top: 10px;

    display: block;
    margin-left: 10px;
    font-size: 14px;
  }

  .zhuyi {
    height: 600px;
    background-image: url("/public/wen1.jpg");
  }
  .zhuyi .biaoqian {
    display: flex;
    margin-left: 43%;
  }

  .zhuyi .biaoqian img {
    margin-right: 15px;
    display: inline-block;
    width: 61px;
    height: 66px;
  }

  .zhuyi .biaoqian h3 {
    font-size: 42px;
    color: #2b4c1d;
  }
  .zhuyi .neirong {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
  .zhuyi .neirong .neirong_1 {
    background-color: white;
    border-radius: 15px;
    margin-left: 30px;
    width: 330px;
    height: 400px;
  }
  .zhuyi .neirong .neirong_1 p {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 24px;
  }
  .zhuyi .neirong .neirong_1 span {
    margin-top: 10px;
    display: block;
    margin-left: 10px;
    font-size: 14px;
  }
</style>
